<!DOCTYPE html>
<html>

<head>
    <title>圈圈运动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 100%;
            height: 1000px;
            position: relative;
            background-color: red;
        }
        
        .wrap-box {
            width: 50%;
            height: 150px;
            margin: 0 auto;
        }
        
        .circular {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: #DEDEDE;
        }
        
        .circular:hover {
            background-color: #000000;
        }
        
        .one {
            left: 50%;
            top: 0px;
            text-align: center;
        }
        
        .two {
            background-color: #DEDEDE;
        }
        
        .two:hover {
            background-color: #000000;
        }
        
        .w100H100 {
            width: 100%;
            height: 100%;
        }
        
        .flex-row {
            width: 700px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            position: relative;
            left: 100px;
            top: 300px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="wrap-box">
            <div id="one" class="circular one">
                <img src="./jp/jp0.png" class="w100H100" alt="">
            </div>
        </div>
        <div class="flex-row">
            <div style="width:100px;height:100px;" class="two">
                <img src="./jp/jp0.png" class="w100H100" alt="">
            </div>
            <div style="width:100px;height:100px;" class="two">
                <img src="./jp/jp1.png" class="w100H100" alt="">
            </div>
            <div style="width:100px;height:100px;" class="two">
                <img src="./jp/jp2.png" class="w100H100" alt="">
            </div>
            <div style="width:100px;height:100px;" class="two">
                <img src="./jp/jp3.png" class="w100H100" alt="">
            </div>
            <div style="width:100px;height:100px;" class="two">
                <img src="./jp/jp4.png" class="w100H100" alt="">
            </div>
            <div style="width:100px;height:100px;" class="two">
                <img src="./jp/jp5.png" class="w100H100" alt="">
            </div>
        </div>
        <button class="btn" style="width:100px;height:50px;margin:0 auto;">button</button>
    </div>

    <script src="./zepto.js"></script>
    <script src='./fx.js'></script>
    <script>
        $(document).ready(function() {
            // $('#one').fadeIn(5000);
            console.log($('#clickId').offset());

            // for (let index = 0; index < $('.flex-row').children().length; index++) {
            //     const element = $('.flex-row').children()[index];
            //     console.log(element);
            //     console.log($(element).offset().left, $(element).offset().top);

            //     $(element).on("click", function(e) {
            //         $('#one').animate({
            //             left: $(element).offset().left + 'px',
            //             top: $(element).offset().top + 'px',
            //             width: 0,
            //             height: 0,
            //             opacity: 0
            //         }, 5000, function() {
            //             // $('#one').css('display', 'none');
            //         });
            //         e.stopPropagation();
            //     });
            // }
            // for (let index = 0; index < $('.flex-row').children().length; index++) {
            //     const element = $('.flex-row').children()[index];

            // }
            const element = $('.flex-row').children()[3];
            $('.btn').on('click', function() {
                $('#one').animate({
                    left: $(element).offset().left + 55 + 'px',
                    top: $(element).offset().top + 100 + 'px',
                    width: '20px',
                    height: '20px',
                    opacity: 0
                }, 3000, function() {

                })
            })
        });
    </script>
</body>

</html>